<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>移动方块动画效果</title>
		<style>
			.movebox{
				width: 100px;
				height: 100px;
				background-color: red;
				animation: movebox 2s infinite;
				position: relative;
			}
			@keyframes movebox{
				from{left: 0px ;top: 0px;}
				to{left: 200px ;top: 200px;}
				from{background-image: ;}
				to{background-image: url(images/earth.png);}
			}
			
			#practice{
				width: 100px;
				height: 100px;
				background-color: green;
				animation: greenbox 2s infinite;
				position: relative ;
			}
			@keyframes greenbox{
				from{left: 0px; top:0px;background-image: url(./images/user.png);}
				to{left:400px; top: 400px;background-image: url(images/earth.png);}
			}
		</style>
	</head>
	<body>
		<div class="movebox"></div>
		<div id="practice"></div>
	</body>
</html>
